Sudo Slider jQuery Plugin - Pause on mouseover demo

  • image description
  • image description
  • image description
  • image description
  • image description

Usage

Include the javascripts

<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it.

<script type="text/javascript" >
$(document).ready(function(){   
   var auto = true;
   var autostopped = false;
   var sudoSlider = $("#slider").sudoSlider({
      auto:true
   })
   .mouseenter(function() {
      auto = sudoSlider.getValue('autoAnimation');
      if (auto) {
         sudoSlider.stopAuto();
      } else {
         autostopped = true;
      }
   }).mouseleave(function() {
      if (!autostopped) {
         sudoSlider.startAuto();
      }
   });
});
</script>

The HTML

<div id="slider" >
   <ul>
        <li><img src="../images/01.jpg" alt="image description"/></li>
        <li><img src="../images/02.jpg" alt="image description"/></li>
        <li><img src="../images/03.jpg" alt="image description"/></li>
        <li><img src="../images/04.jpg" alt="image description"/></li>
        <li><img src="../images/05.jpg" alt="image description"/></li>	
    </ul>
</div>